import { Button, Space, SpaceProps } from 'antd';
import classNames from 'classnames';
import Auth from '../auth';
import styles from './index.module.less';

export interface IActionBtn {
  action: string;
  label: string;
  authKey?: string;
}

export interface IActionBtnGroupProps<T> {
  items: IActionBtn[];
  record: T;
  onActionBtnClick: (item: IActionBtn, record: T) => void;
}

export default <T extends {}>(props: IActionBtnGroupProps<T> & SpaceProps) => {
  const { items, record, onActionBtnClick, className, ...restProps } = props;

  return (
    <Space className={classNames(styles['action-btn-group'], className)} {...restProps}>
      {items.map((item) => {
        const { action, label, authKey } = item;
        return authKey ? (
          <Auth key={action} authKey={authKey}>
            <Button key={action} type="link" size="small" onClick={() => onActionBtnClick(item, record)}>
              {label}
            </Button>
          </Auth>
        ) : (
          <Button key={action} type="link" size="small" onClick={() => onActionBtnClick(item, record)}>
            {label}
          </Button>
        );
      })}
    </Space>
  );
};
